<template>
  <div class="serch">
    <van-nav-bar
  title="商品搜索"
  left-arrow
  @click-left="$router.push('/home')"
/>
<div class="search"></div>
<van-search
  v-model="value"
  show-action
  placeholder="请输入搜索关键词"
  @search="onSearch"
>
  <template #action>
    <div @click="onSearch">搜索</div>
  </template>
</van-search>
  </div>
</template>

<script>
export default {
  name: 'SerchPage',
  data () {
    return {
      value: ''
    }
  },
  methods: {

    onSearch () {

    }

  }
}
</script>

<style lang='less' scoped>
/deep/.van-nav-bar{
  height: 45px;
  .van-nav-bar__title{
    font-size: 16px;
    line-height: 25px;
    margin-top: 20px;
    font-weight: 700;
  }
  .van-icon-arrow-left{
    font-size: 25px;
    line-height: 25px;
    margin-top: 20px;
    color: #000;
  }
}
template{
  background-color: #f1f1f2;
}
/deep/.van-search{
  height: 50px;
  background-color: #f1f1f2;
  .van-search__content {
  background-color: #fff;
  height: 30px;
    margin: 5px 5px;
  border-radius: 5px 0 0 5px ;
  }
  .van-cell--borderless{
    font-size: 13px;
    line-height: 25px;
    color: #fff;
    margin-left: 5px;
  }
  .van-icon{
    font-size: 15px;
    line-height: 25px;

  }
}
/deep/.van-search__action{
  width: 60px;
  background-color: #fa2209;
  margin-left: -5px;
  margin-right: 15px;
  height: 30px;
  border-radius:0 5px 5px 0 ;
  div{
    font-size: 15px;
    line-height: 30px;
    margin-left: 15px;
    color: #fff;
  }
}
</style>
